<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{count}}</h1>
        <button @click="add">求点击</button>
    </div>
</body>
<script>

    const app = {
        data () {
            return {
                count: 100
            }
        },
        methods: {
            // 函数使用箭头函数的时候会导致 this 指向 window,不是当前实例
            // add: () => {
            //     console.log(this);
            // }
            add () {
                console.log(this);
                this.count++
                // 按照正常理解来讲这里获取的内容应该是最新内容
                // 但是实际获取的是上一次的内容，而不是最新数据
                // console.log(document.querySelector('h1').innerText);

                // 在我们延迟 100 毫秒后发现，可以获取到最新数据
                // setTimeout(() => {
                //     console.log(document.querySelector('h1').innerText);
                // }, 100)

                // 原因：因为 vue 采用的是虚拟 DOM，所谓的虚拟 DOM 其实是一个 js 对象
                // 1. vue 数据发生改变后不会立即更新到真实 DOM 中，而是先更新虚拟 DOM
                // 2. 当虚拟 DOM 改变后会通过 DIFF 算法将改变后的值更新到真实 DOM 中
                // DIFF：会比较新老 DOM 找到有改变的地方，只更新有变化的地方，提高性能


                /*
                    {
                        tag: 'div',
                        attr: {
                            id: 'app',
                            class: '',
                            title: ''
                        },
                        content: [
                            {
                                tag: 'h1',
                                attr: {},
                                content: [
                                    '101'
                                ]
                            }, {
                                tag: 'button',
                                content: [
                                    '求点击',
                                    {
                                        tag: ''
                                    }
                                ]
                            }
                        ]
                    }
                */

                console.log('qqqqqqq', document.querySelector('h1').innerText);

                // nextTick 会在真实 DOM 更新之后调用
                Vue.nextTick(() => {
                    // 该方法是用来获取更新之后的 DOM 元素
                    console.log('wwwwwwww', document.querySelector('h1').innerText);
                })

            }
        },
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

</html>